<style lang="less" scoped>
  .medical-process{
    width: 100%;
    height: 100%;
    &_title{
      height: 40px;
      background: url('~@/images/contenttitle.png');
      background-repeat: no-repeat;
      background-position: bottom;
      text-align: center;
      color: #00F6FF;
      line-height: 40px;
      margin-bottom: 5px;
    }
    &_content{
      height: calc(100% - 45px);
    }
  }
</style>

<template>
  <div class="medical-process">
    <div class="medical-process_title">
      <span>就诊流程</span>
    </div>
    <div id="medicalProcess" class="medical-process_content">1</div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { getVisitFlow, getVisitStrokeFlow, getVisitTraumaFlow } from '@/api/comprehensive/medicalProcess'
export default {
  props: {
    isStrock: {
      type: String,
      default: 'chestPain'
    }
  },
  data() {
    return {
      setInter: null
    }
  },
  watch: {
    'isStrock'() {
      this.getMedical()
    }
  },
  mounted() {
    this.getMedical()
    this.setInter = setInterval(() => {
      this.getMedical()
    }, 5000)
  },
  destroyed() {
    clearInterval(this.setInter)
  },
  methods: {
    getMedical() {
      const myChart = echarts.init(document.getElementById('medicalProcess'))
      // myChart.clear()
      myChart.showLoading({
        text: '',
        fontSize: 18,
        left: 'center',
        color: 'transparent', // loading颜色，设置成透明或白色，不然会显示loading状态
        textColor: '#fff', // 文字颜色
        maskColor: 'rgba(255, 255, 255, 0)' // 背景色
      })
      window.addEventListener('resize', myChart.resize)
      const timeData = []
      const diag2DAData = []
      const fmc2ECGData = []
      const ecg2DIAGData = []
      const ctne2RData = []
      if (this.isStrock == 'chestPain') {
        getVisitFlow({
          hospitalId: this.$store.getters.hospitalId
        }).then(res => {
          if (res.code == 0) {
            if (res.data && res.data.length > 0) {
              res.data.forEach(el => {
                if (el) {
                  timeData.push(el.timeName ? el.timeName : '')
                  diag2DAData.push(el.diag2DA ? el.diag2DA : '')
                  fmc2ECGData.push(el.fmc2ECG ? el.fmc2ECG : '')
                  ecg2DIAGData.push(el.ecg2DIAG ? el.ecg2DIAG : '')
                  ctne2RData.push(el.ctne2R ? el.ctne2R : '')
                }
              })
            }
            if (timeData.length > 0) {
              const option = {
                color: ['#36CACA', '#3A9FFF', '#9660E1', '#FA9B00'],
                legend: {
                  bottom: 0,
                  textStyle: {
                    color: '#fff'
                  }
                },
                grid: {
                  top: '15%',
                  left: '3%',
                  right: '10%',
                  bottom: '20%',
                  containLabel: true
                },
                xAxis: {
                  show: false
                },
                yAxis: {
                  type: 'category',
                  name: '单位：分钟',
                  nameTextStyle: {
                    color: '#fff',
                    align: 'left',
                    lineHeight: 0,
                    verticalAlign: 'left'
                  },
                  splitLine: {
                    show: false
                  },
                  axisTick: {
                    show: false
                  },
                  axisLine: {
                    show: false
                  },
                  axisLabel: {
                    color: '#fff'
                  },
                  data: ['最小时间', '平均时间', '最大时间']
                },
                series: [{
                  name: 'FMC2ECG',
                  type: 'bar',
                  stack: 'time',
                  barWidth: 15,
                  label: {
                    formatter: '{c}',
                    show: true,
                    color: '#fff',
                    position: ['30%', '20%']
                  },
                  showBackground: true,
                  backgroundStyle: {
                    color: 'rgba(110, 193, 244, 0.2)'
                  },
                  data: fmc2ECGData
                }, {
                  name: '心电图至确认',
                  type: 'bar',
                  stack: 'time',
                  barWidth: 15,
                  label: {
                    formatter: '{c}',
                    show: true,
                    color: '#fff',
                    position: ['30%', '20%']
                  },
                  showBackground: true,
                  backgroundStyle: {
                    color: 'rgba(110, 193, 244, 0.2)'
                  },
                  data: ecg2DIAGData
                }, {
                  name: '肌钙蛋白到报告时间',
                  type: 'bar',
                  stack: 'time',
                  barWidth: 15,
                  label: {
                    formatter: '{c}',
                    show: true,
                    color: '#fff',
                    position: ['30%', '20%']
                  },
                  showBackground: true,
                  backgroundStyle: {
                    color: 'rgba(110, 193, 244, 0.2)'
                  },
                  data: ctne2RData
                }, {
                  name: 'NSTEMI/STEMI/UA确认到服用双抗',
                  type: 'bar',
                  stack: 'time',
                  barWidth: 15,
                  label: {
                    formatter: '{c}',
                    show: true,
                    color: '#fff',
                    position: ['30%', '20%']
                  },
                  showBackground: true,
                  backgroundStyle: {
                    color: 'rgba(110, 193, 244, 0.2)'
                  },
                  data: diag2DAData
                }]
              }
              myChart.setOption(option)
            } else {
              myChart.showLoading({
                text: '暂无数据',
                fontSize: 18,
                left: 'center',
                color: 'transparent', // loading颜色，设置成透明或白色，不然会显示loading状态
                textColor: '#fff', // 文字颜色
                maskColor: 'rgba(255, 255, 255, 0)' // 背景色
              })
            }
          }
        })
      } else if (this.isStrock == 'stroke') {
        getVisitStrokeFlow({
          hospitalId: this.$store.getters.hospitalId
        }).then(res => {
          if (res.code == 0) {
            if (res.data && res.data.length > 0) {
              res.data.forEach(el => {
                if (el) {
                  timeData.push(el.timeType ? el.timeType : '')
                  diag2DAData.push(el.checkResultMinute ? el.checkResultMinute : '')
                  fmc2ECGData.push(el.arrival2CT ? el.arrival2CT : '')
                  ecg2DIAGData.push(el.emergen2CT ? el.emergen2CT : '')
                  ctne2RData.push(el.CT2Ward ? el.CT2Ward : '')
                }
              })
            }
            if (timeData.length > 0) {
              const option = {
                color: ['#36CACA', '#3A9FFF', '#9660E1', '#FA9B00'],
                legend: {
                  bottom: 0,
                  textStyle: {
                    color: '#fff'
                  }
                },
                grid: {
                  top: '15%',
                  left: '3%',
                  right: '10%',
                  bottom: '20%',
                  containLabel: true
                },
                xAxis: {
                  show: false
                },
                yAxis: {
                  type: 'category',
                  name: '单位：分钟',
                  nameTextStyle: {
                    color: '#fff',
                    align: 'left',
                    lineHeight: 0,
                    verticalAlign: 'left'
                  },
                  splitLine: {
                    show: false
                  },
                  axisTick: {
                    show: false
                  },
                  axisLine: {
                    show: false
                  },
                  axisLabel: {
                    color: '#fff'
                  },
                  data: ['最大时间', '平均时间', '最小时间']
                },
                series: [{
                  name: '检验出结果时间',
                  type: 'bar',
                  stack: 'time',
                  barWidth: 15,
                  label: {
                    formatter: '{c}',
                    show: true,
                    color: '#fff',
                    position: ['30%', '20%']
                  },
                  showBackground: true,
                  backgroundStyle: {
                    color: 'rgba(110, 193, 244, 0.2)'
                  },
                  data: fmc2ECGData
                }, {
                  name: '患者到达医院至完成CT检查的时间',
                  type: 'bar',
                  stack: 'time',
                  barWidth: 15,
                  label: {
                    formatter: '{c}',
                    show: true,
                    color: '#fff',
                    position: ['30%', '20%']
                  },
                  showBackground: true,
                  backgroundStyle: {
                    color: 'rgba(110, 193, 244, 0.2)'
                  },
                  data: ecg2DIAGData
                }, {
                  name: '急诊室到CT室时间',
                  type: 'bar',
                  stack: 'time',
                  barWidth: 15,
                  label: {
                    formatter: '{c}',
                    show: true,
                    color: '#fff',
                    position: ['30%', '20%']
                  },
                  showBackground: true,
                  backgroundStyle: {
                    color: 'rgba(110, 193, 244, 0.2)'
                  },
                  data: ctne2RData
                }, {
                  name: 'CT室到病房时间',
                  type: 'bar',
                  stack: 'time',
                  barWidth: 15,
                  label: {
                    formatter: '{c}',
                    show: true,
                    color: '#fff',
                    position: ['30%', '20%']
                  },
                  showBackground: true,
                  backgroundStyle: {
                    color: 'rgba(110, 193, 244, 0.2)'
                  },
                  data: diag2DAData
                }]
              }
              myChart.setOption(option)
            } else {
              myChart.showLoading({
                text: '暂无数据',
                fontSize: 18,
                left: 'center',
                color: 'transparent', // loading颜色，设置成透明或白色，不然会显示loading状态
                textColor: '#fff', // 文字颜色
                maskColor: 'rgba(255, 255, 255, 0)' // 背景色
              })
            }
          }
        })
      } else if (this.isStrock == 'trauma') {
        getVisitTraumaFlow({
          hospitalId: this.$store.getters.hospitalId
        }).then(res => {
          if (res.code == 0) {
            if (res.data && res.data.length > 0) {
              res.data.forEach(el => {
                if (el) {
                  timeData.push(el.timeType ? el.timeType : '')
                  diag2DAData.push(el.preHospitalTransferMinutes ? el.preHospitalTransferMinutes : '')
                  fmc2ECGData.push(el.completeWholeFastCTMinutes ? el.completeWholeFastCTMinutes : '')
                  ecg2DIAGData.push(el.emergenBloodPreparationMinutes ? el.emergenBloodPreparationMinutes : '')
                  ctne2RData.push(el.emergenStayHours ? el.emergenStayHours : '')
                }
              })
            }
            if (timeData.length > 0) {
              const option = {
                color: ['#36CACA', '#3A9FFF', '#9660E1', '#FA9B00'],
                legend: {
                  bottom: 0,
                  textStyle: {
                    color: '#fff'
                  }
                },
                grid: {
                  top: '15%',
                  left: '3%',
                  right: '10%',
                  bottom: '20%',
                  containLabel: true
                },
                xAxis: {
                  show: false
                },
                yAxis: {
                  type: 'category',
                  name: '单位：分钟',
                  nameTextStyle: {
                    color: '#fff',
                    align: 'left',
                    lineHeight: 0,
                    verticalAlign: 'left'
                  },
                  splitLine: {
                    show: false
                  },
                  axisTick: {
                    show: false
                  },
                  axisLine: {
                    show: false
                  },
                  axisLabel: {
                    color: '#fff'
                  },
                  data: ['最大时间', '平均时间', '最小时间']
                },
                series: [{
                  name: '院前转运时间',
                  type: 'bar',
                  stack: 'time',
                  barWidth: 15,
                  label: {
                    formatter: '{c}',
                    show: true,
                    color: '#fff',
                    position: ['30%', '20%']
                  },
                  showBackground: true,
                  backgroundStyle: {
                    color: 'rgba(110, 193, 244, 0.2)'
                  },
                  data: fmc2ECGData
                }, {
                  name: '完成全身快速CT时间',
                  type: 'bar',
                  stack: 'time',
                  barWidth: 15,
                  label: {
                    formatter: '{c}',
                    show: true,
                    color: '#fff',
                    position: ['30%', '20%']
                  },
                  showBackground: true,
                  backgroundStyle: {
                    color: 'rgba(110, 193, 244, 0.2)'
                  },
                  data: ecg2DIAGData
                }, {
                  name: '完成急诊输血时间',
                  type: 'bar',
                  stack: 'time',
                  barWidth: 15,
                  label: {
                    formatter: '{c}',
                    show: true,
                    color: '#fff',
                    position: ['30%', '20%']
                  },
                  showBackground: true,
                  backgroundStyle: {
                    color: 'rgba(110, 193, 244, 0.2)'
                  },
                  data: ctne2RData
                }, {
                  name: '急诊科停留时间',
                  type: 'bar',
                  stack: 'time',
                  barWidth: 15,
                  label: {
                    formatter: '{c}',
                    show: true,
                    color: '#fff',
                    position: ['30%', '20%']
                  },
                  showBackground: true,
                  backgroundStyle: {
                    color: 'rgba(110, 193, 244, 0.2)'
                  },
                  data: diag2DAData
                }]
              }
              myChart.setOption(option)
            } else {
              myChart.showLoading({
                text: '暂无数据',
                fontSize: 18,
                left: 'center',
                color: 'transparent', // loading颜色，设置成透明或白色，不然会显示loading状态
                textColor: '#fff', // 文字颜色
                maskColor: 'rgba(255, 255, 255, 0)' // 背景色
              })
            }
          }
        })
      }
    }
  }
}
</script>
